<template>
  <div>
    <el-dialog
      class="my_dialog"
      v-bind="$attrs"
      v-on="$listeners"
      v-draggable
      width="600px"
      :visible="visible"
      @open="onOpen"
      @close="onClose"
      :title="title"
      :close-on-click-modal="false"
    >
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="发生方类型" prop="fromRoleTypeId">
          <el-select
            v-model="formData.fromRoleTypeId"
            placeholder="请选择发生方类型"
            clearable
            :style="{ width: '100%' }"
            @change="
              (e) => {
                selectSource(e, 1);
              }
            "
          >
            <el-option
              v-for="(item, index) in fromRoleTypeIdOptions"
              :key="index"
              :label="item.dictLabel"
              :value="Number(item.dictValue)"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发生方" prop="fromRoleId">
          <el-select
            v-model="formData.fromRoleId"
            placeholder="请选择发生方"
            clearable
            :style="{ width: '100%' }"
            @change="
              (e) => {
                selectSource(e, 1);
              }
            "
          >
            <el-option
              v-for="(item, index) in fromRoleIdOptions"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目标方类型" prop="toRoleTypeId">
          <el-select
            v-model="formData.toRoleTypeId"
            placeholder="请选择目标方类型"
            clearable
            :style="{ width: '100%' }"
            @change="
              (e) => {
                selectSource(e, 2);
              }
            "
          >
            <el-option
              v-for="(item, index) in toRoleTypeIdOptions"
              :key="index"
              :label="item.dictLabel"
              :value="Number(item.dictValue)"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目标方" prop="toRoleId">
          <el-select
            v-model="formData.toRoleId"
            placeholder="请选择目标方"
            clearable
            :style="{ width: '100%' }"
            @change="
              (e) => {
                selectSource(e, 1);
              }
            "
          >
            <el-option
              v-for="(item, index) in toRoleIdOptions"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单据类型" prop="billType">
          <el-select
            v-model="formData.billType"
            placeholder="请选择单据类型"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in billTypeOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="ERP单据号" prop="billNo">
          <el-input
            v-model="formData.billNo"
            placeholder="请输入ERP单据号"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="ERP单据ID" prop="billID">
          <el-input
            v-model="formData.billID"
            placeholder="请输入ERP单据ID"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="formData.status"
            placeholder="请选择状态"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in statusOptions"
              :key="index"
              :label="item.dictLabel"
              :value="Number(item.dictValue)"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="formData.remark"
            type="textarea"
            placeholder="请输入备注"
            :autosize="{ minRows: 4, maxRows: 4 }"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getListByTypeId } from "@/api/futureCloudMOM/wms/sourceMain";
export default {
  inheritAttrs: false,
  components: {},
  props: ["title", "visible", "item"],
  data() {
    return {
      formData: {
        fromRoleTypeId: "",
        fromRoleId: "",
        toRoleTypeId: "",
        toRoleId: "",
        billType: "",
        billNo: "",
        billID: "",
        status: "",
        remark: "",
      },
      rules: {
        fromRoleTypeId: [
          {
            required: true,
            message: "请选择发生方类型",
            trigger: "change",
          },
        ],
        fromRoleId: [
          {
            required: true,
            message: "请选择发生方",
            trigger: "blur",
          },
        ],
        toRoleTypeId: [
          {
            required: true,
            message: "请选择目标方类型",
            trigger: "change",
          },
        ],
        toRoleId: [
          {
            required: true,
            message: "请选择目标方",
            trigger: "blur",
          },
        ],
        billType: [
          {
            required: true,
            message: "请选择单据类型",
            trigger: "change",
          },
        ],
        billNo: [
          {
            required: true,
            message: "请输入ERP单据号",
            trigger: "blur",
          },
        ],
        billID: [
          {
            required: true,
            message: "请输入ERP单据ID",
            trigger: "blur",
          },
        ],
        status: [
          {
            required: true,
            message: "请选择状态",
            trigger: "change",
          },
        ],
      },
      fromRoleTypeIdOptions: [],
      fromRoleIdOptions: [],
      toRoleTypeIdOptions: [],
      toRoleIdOptions: [],
      billTypeOptions: [
        {
          label: "测试一",
          value: 4011,
        },
        {
          label: "测试二",
          value: 40012,
        },
      ],
      statusOptions: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onOpen() {
      this.getDictText();
    },
    async getDictText() {
      let res = await this.getDicts("role_type");
      this.fromRoleTypeIdOptions = res.data;
      this.toRoleTypeIdOptions = res.data;

      let status = await this.getDicts("source_main");
      this.statusOptions = status.data;

      this.$nextTick(() => {
        if (this.item) {
          this.formData = JSON.parse(JSON.stringify(this.item));
        }
      });
    },
    getList(item, i) {
      getListByTypeId(item).then((res) => {
        if (i == 1) {
          this.fromRoleIdOptions = res.rows;
        } else {
          this.toRoleIdOptions = res.rows;
        }
      });
    },
    selectSource(e, i) {
      let item = {
        RoleTypeId: e,
      };
      this.getList(item, i);
    },
    onClose() {
      this.$refs["elForm"].resetFields();
      this.close();
    },
    close() {
      this.$emit("update:visible", false);
    },
    handleConfirm() {
      let form = JSON.parse(JSON.stringify(this.formData));
      console.log(form);
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        this.$emit("Ok", form);
        this.close();
      });
    },
  },
};
</script>
<style>
</style>
